import React, {Component} from "react";
import {
    Modal,
    Form,
    Input,
    Spin,
    Select,
    InputNumber,
    TreeSelect
} from "antd";

const FormItem = Form.Item;
const Option = Select.Option;

@Form.create()
export default class AdminEditForm extends Component {
    constructor(props) {
        super(props);
        const {record} = props;
        this.state = {
            formDatas: {
                id: "",
                parentId: "",
                text: "",
                menuType: "",
                url: "",
                sort: "",
                module: "",
                description: "",
                ...record
            }
        };
    }

    /**
     * 返回表单数据到父组件
     */
    onOk = () => {
        this.props.form.validateFields((err, values) => {
            if (!err) {
                this.props.onOk(values);
            }
        });
    };
    /**
     * 清除表单数据
     */
    handleFormClear = () => {
        const {form} = this.props;
        form.resetFields();
    };

    render() {
        const {modalType, loading = false, treeData, form, record} = this.props;
        const {getFieldDecorator} = form;
        let {formDatas} = this.state;
        formDatas = {formDatas, ...record};
        const formItemLayout = {
            labelCol: {span: 6},
            wrapperCol: {span: 16}
        };
        return (
            <Modal
                visible={this.props.visible}
                title={`${modalType !== "edit" ? "新增" : "编辑"}资源`}
                okText="提交"
                cancelText="取消"
                onCancel={this.props.onCancel}
                onOk={this.onOk}
                afterClose={this.handleFormClear}
            >
                <Spin tip="数据加载中..." spinning={loading}>
                    <Form>
                        <div style={{display: "none"}}>
                            {modalType === "edit" && (
                                <FormItem {...formItemLayout} label="id" hasFeedback>
                                    {getFieldDecorator("id", {
                                        initialValue: formDatas.id,
                                        rules: [{required: false, message: "请输入id！"}]
                                    })(<InputNumber/>)}
                                </FormItem>
                            )}
                        </div>

                        <FormItem {...formItemLayout} label="序号" hasFeedback>
                            {getFieldDecorator("sort", {
                                initialValue: formDatas.sort,
                                rules: [{required: true, message: "请输入序号！"}]
                            })(<InputNumber/>)}
                        </FormItem>
                        <FormItem {...formItemLayout} label="所属资源" hasFeedback>
                            {getFieldDecorator("parentId", {
                                rules: [{required: true, message: "请输入所属资源id！"}],
                                initialValue:
                                    modalType === "edit" ? formDatas.parentId + "" : "0"
                            })(<TreeSelect style={{width: 180}} treeData={Object.values(treeData)}/>)}
                        </FormItem>
                        <FormItem {...formItemLayout} label="资源名" hasFeedback>
                            {getFieldDecorator("text", {
                                initialValue: formDatas.text,
                                rules: [{required: true, message: "请输入资源名！"}]
                            })(<Input/>)}
                        </FormItem>
                        <FormItem {...formItemLayout} label="资源链接" hasFeedback>
                            {getFieldDecorator("url", {
                                initialValue: formDatas.url,
                                rules: [{required: true, message: "请输入资源链接！"}]
                            })(<Input/>)}
                        </FormItem>
                        <FormItem {...formItemLayout} label="资源类型" hasFeedback>
                            {getFieldDecorator("menuType", {
                                initialValue: formDatas.menuType,
                                rules: [{required: true, message: "请输入资源类型！"}]
                            })(
                                <Select
                                    style={{width: 275}}
                                    optionFilterProp="children"
                                    notFoundContent="无法找到"
                                    searchPlaceholder="请输入资源类型"
                                >
                                    <Option value="list">列表</Option>
                                    <Option value="element">元素</Option>
                                    <Option value="page">菜单</Option>
                                </Select>
                            )}
                        </FormItem>
                        <FormItem {...formItemLayout} label="资源描述" hasFeedback>
                            {getFieldDecorator("description", {
                                initialValue: formDatas.description,
                                rules: [{required: false, message: "请输入资源描述！"}]
                            })(<Input/>)}
                        </FormItem>
                    </Form>
                </Spin>
            </Modal>
        );
    }
}
